<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>其他__手动挂载实例</title>
</head>
<body>

<div id="mount-div">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     *在以前我们所创建的实例都是通过new Vue()的形式，这是通过el来实现自动挂载的。但是在某些时候需要动态地去创建Vue实例。
     * Vue提供了Vue.extend和$mount两个方法用于手动挂载一个实例。Vue.extend是基础的Vue构造器，用于创建一个"子类"，参数是一个包含组件选项的对象。
     *如果Vue实例在实例化时没有接收到el选项，那么它就处于"未挂载"状态，没有关联的DOM元素，此时可以使用$mount()方法来手动挂载一个未挂载的实例。
     * 这个方法返回实例自身，因而可以链式调用其他的实例方法。
     * */

    //创建一个组件构造器
     var myComponent = Vue.extend({
        template:"<div>hello,{{ name }}!</div>",
        data:function () {
            return {
                name:"Vue.js"
            }
        }
    }) ;
    //实例化一个对象，并挂载mount-div元素
    //第一种方法
    // new myComponent().$mount("#mount-div");

    //第二种方法
    // new myComponent({
    //     el:"#mount-div",
    // })
    //第三种方法，在文档之外渲染并且随后挂载
    var component = new MyComponent().$mount();
    document.getElementById("mount-div").appendChild(component.$el)

    //手动挂载实例（组件）是一种比较极端的高级用法，在业务中几乎用不到，只在开发一些复杂的独立组件时可能会使用到，因此了解一下就好。

</script>
</body>
</html>